<template>
    <div class="sdy-home-banner">
            <van-swipe class="my-swipe box" :autoplay="3000" indicator-color="red">
                <van-swipe-item v-for="(item) in bannerList" :key="item.bannerid">
                <img :src="item.img" alt="">
                </van-swipe-item>
            </van-swipe>
    </div>
</template>

<script name="sdyBanner" setup lang="ts">
import {getBannerList} from '../../../model/goods'

import {onMounted , ref } from 'vue'

//定义接口
interface BannerInfo {
    img?:string
    alt?:string
    link?:string
    bannerid?:string
    flag?:boolean
}

interface Response{
    code:string
    datra:Array<BannerInfo>
}

//保存轮播图列表
const bannerList = ref<Array<BannerInfo>>([])

onMounted(async ()=>{
    const res = await getBannerList()
    console.log(res);
    
    if ((res as unknown as Response).code === "200") {        
        bannerList.value = res.data   
    }
})
</script>

<style lang="scss" scoped>
.sdy-home-banner{
    height: 150px;
    margin-top: -5px;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    
    &:before{
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: #50bb78;
        border-radius: 0 0 200px 200px / 0 0 30px 30px;
        box-shadow:  36px 36px 41px #c3c3c3,
             -36px -36px 41px #fdfdfd;
        box-sizing: border-box;
        transform: translateY(-50px);
        padding: 50px;
        position: absolute;
        z-index: 1;
    }
    .box{
        width: 100%;
        height: 100%;
        padding: 10px;
        position: relative;
        z-index:2;
        img{
            width: 90%;
            height: 100%;
        }
    }
}
</style>
